<template>
	<div class="home_index">
		<div class="play_list">
			<div
				class="list_one"
				v-for="item in playList"
				:key="item.path"
				@click="changeRouter(item.path)"
			>
				<img :src="item.url" alt="" class="list_one_img" />
				<p class="list_one_title">{{ item.label }}</p>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import {
	random,
	puzzle,
	klotski,
	blindness,
} from "./../../../assets/image/homePage/index";
const router = useRouter();
const changeRouter = (url: string) => {
	router.push(url);
};
const playList = [
	{
		url: random,
		label: "聚会抽奖",
		path: "/random",
	},
	{
		url: klotski,
		label: "数字华容道",
		path: "/klotski",
	},
	{
		url: puzzle,
		label: "掘金拼图",
		path: "/puzzle",
	},
	{
		url: blindness,
		label: "颜色鉴定师",
		path: "/blindness",
	},
];
</script>
<style scoped lang="less">
.home_index {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("./../../../assets/image/allbgi.png");
	position: relative;
	.play_list {
		width: 60%;
		height: 40%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: space-around;
		.list_one {
			text-align: center;
			cursor: pointer;
			.list_one_img {
				width: 50px;
				height: 50px;
				border-radius: 10px;
			}
			.list_one_title {
				font-size: 24px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #fc7608;
				line-height: 33px;
				letter-spacing: 1px;
				background: linear-gradient(360deg, #d01b20 0%, #fc7608 50%, #fff 100%);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
}
</style>
